<template>
  <div>
    <el-row :gutter="20" >
     <el-col :span="24" >
       <div style="background-color: #00afff;">
<p>布比卡因脂质体切口局部浸润对混合痔外剥内扎术及肛瘘手术患者术后镇痛的效果观察：一项前瞻性、多中心、队列研究</p>
       </div>
     </el-col>

      <el-col>
        <p>查看CRF模板</p>
      </el-col>
<!--TAB栏-->
      <el-col>
        <el-tabs v-model="surgeryDate" @tab-click="handleClick">
          <el-tab-pane label="术前筛选期（V0）" name="v0" ><Tab1/></el-tab-pane>
          <el-tab-pane label="手术当天(V1)" name="v1"><Tab2/></el-tab-pane>
          <el-tab-pane label="术后第一天(V1)" name="v2"><Tab3/></el-tab-pane>
          <el-tab-pane label="术后第二天(V2)" name="v3"><Tab1/></el-tab-pane>
          <el-tab-pane label="术后第三天(V3)" name="v4"><Tab1/></el-tab-pane>
          <el-tab-pane label="研究结束表" name="studyEnd"><Tab1/></el-tab-pane>

        </el-tabs>
      </el-col>


    </el-row>
  </div>
</template>
<script>
import Tab1 from './1.vue';  // 导入各个 tab 对应的组件
import Tab2 from './2.vue';
import Tab3 from './3.vue';

export default {
  components: {
    Tab1,
    Tab2,
    Tab3,

  },
  props: [],
  data() {
    return {
      currentTab: 'v1',
      surgeryDate:''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // tabs标签页切换事件
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {
             console.log("切换到了第一个页面")
      } else if (tab.index == 1) {
        console.log("切换到了第二个页面")
      } else {
        console.log("切换到了其他页面")
      }
    }
  }
}

</script>
<style>
body{
  padding-left: 18px;
  padding-right: 18px;
}

</style>
